
<template>
  <view class="facilities-container">
    <view class="facilities-grid">
      <view v-for="(item, index) in facilities" :key="index" class="facility-item">
        <view class="facility-icon">
          <uni-icons :type="getIconType(item)" size="24" color="#666666"></uni-icons>
        </view>
        <text class="facility-label">{{ item }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    facilities: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getIconType(value){
      const iconMap = {
        '水': 'hand-up',
        '电': 'power',
        '电梯': 'arrow-up',
        '暖气': 'fire',
        '宽带': 'wifi',
        '电话': 'phone',
        '中央空调': 'star',
        '办公家具': 'chair',
        '免费车位': 'car',
        '员工餐厅': 'shop',
        '安全监控': 'eye'
      };
      return iconMap[value] || 'spinner-cycle';
    }
  }
}
</script>

<style>
page {
  height: 100%;
}

.facilities-container {
  padding: 30rpx;
  background-color: #ffffff;
  padding-bottom: 30rpx;
  margin-bottom: 20rpx;
}

.facilities-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10rpx;
}

.facility-item {
  width: 20%;
  padding: 10rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.facility-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  border-radius: 24px;
  background-color: #f5f5f5;
}

.facility-label {
  font-size: 12px;
  color: #666666;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
}
</style>

